<template>
  <el-from :model="Registry" class="boreder w-25 mx-auto mt-2">
    <el-form-item>
      <el-col class="mx-auto  text-center w-25">
        <img src="@/assets/hi.jpg" style="width: 10rem; height: 10rem" />
        <div class="w-50 text-center mx-auto fs-2">Hi邻邻创建</div>
      </el-col>
    </el-form-item>

    <el-form-item class="mx-auto w-25" label="用户名">
      <el-col :span="20">
        <el-input
          placeholder="请输入用户名"
          v-model="registry.username"
        ></el-input>
      </el-col>
    </el-form-item >
    <el-form-item class="mx-auto w-25" label="昵称">
      <el-col :span="20">
        <el-input
          placeholder="请输入昵称"
          v-model="registry.password"
        ></el-input>
      </el-col>
    </el-form-item>
    <el-form-item class="mx-auto w-25" label="设置密码">
      <el-col :span="20">
        <el-input
          placeholder="请设置密码"
          v-model="registry.confirmPass"
        ></el-input>
      </el-col>
    </el-form-item>
    <el-form-item class="mx-auto w-25" label="确认密码">
      <el-col :span="20">
        <el-input
          placeholder="确认密码"
          v-model="registry.authorName"
        ></el-input>
      </el-col>
    </el-form-item>
    <el-form-item>
      <div class="text-center mx-auto">
        <el-button class="mx-auto" type="primary" @click="registryAction"
          >注册</el-button
        >
      </div>
    </el-form-item>
  </el-from>
</template>

<script>
export default {
  name: "RegistryFrame",
  data() {
    return {
      registry: {
        username: null,
        password: null,
        confirmPass: null,
        authorName: null,
      },
    };
  },
  methods: {
    registryAction() {
      if (this.registry.password == this.registry.confirmPass) {
        this.$axios.post("/api/registry", this.registry).then((response) => {
          let data = response.data;
          if (data.code == 200) {
            alert(data.msg);
            this.$router.push("/Login");
          } else {
            alert(data.msg);
          }
        });
      } else {
        alert("两次输入的密码不一致");
      }
    },
  },
};
</script>

<style>
</style>
